<template>
  <div class="container">
    <el-card>
      <div class="btn_wrapper">
        <span style="font-size: 12px; color: pink">说明：目前支持学科和关键字条件筛选</span>
        <el-button type="success" icon="el-icon-edit" size="small">新增试题</el-button>
      </div>
      <div>
        <el-form ref="searchRef" :inline="true" :model="formInline" class="demo-form-inline">
          <div class="el-col-6">
            <el-form-item prop="subjectID" label="学科">
              <el-select v-model="formInline.subjectID" placeholder="请选择" style="width: 321px" @change="changeSubjectID">
                <el-option v-for="item in data.subjectID" :label="item.label" :key="item.value" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="el-col-6">
            <el-form-item prop="catalogID" label="二级目录">
              <el-select v-model="formInline.catalogID" placeholder="请选择" style="width: 321px">
                <el-option v-for="item in data.catalogID" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="el-col-6">
            <el-form-item prop="tags" label="标签">
              <el-select v-model="formInline.tags" placeholder="请选择" style="width: 321px">
                <el-option v-for="item in data.tags" :key="item.tags" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="el-col-6">
            <el-form-item prop="keyword" label="关键字">
              <el-input placeholder="根据题干搜索" v-model="formInline.keyword" style="width: 321px"></el-input>
            </el-form-item>
          </div>
          <div class="el-col-6">
            <el-form-item prop="state" label="试题类型">
              <el-select v-model="formInline.questionType" placeholder="请选择" style="width: 321px">
                <el-option v-for="item in data.questionType" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="el-col-6">
            <el-form-item prop="state" label="难度">
              <el-select v-model="formInline.difficulty" placeholder="请选择" style="width: 321px">
                <el-option v-for="item in data.difficulty" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="el-col-6">
            <el-form-item prop="state" label="放向">
              <el-select v-model="formInline.direction" placeholder="请选择" style="width: 321px">
                <el-option v-for="(item, index) in data.direction" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="el-col-6">
            <el-form-item prop="creatorID" label="录入人">
              <el-select v-model="formInline.creatorID" placeholder="请选择" style="width: 321px">
                <el-option v-for="item in data.creatorID" :key="item.id" :label="item.username" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="el-col-6">
            <el-form-item prop="remarks" label="题目备注">
              <el-input v-model="formInline.remarks" style="width: 321px"></el-input>
            </el-form-item>
          </div>
          <div class="el-col-6">
            <el-form-item prop="shortName" label="企业简称">
              <el-input v-model="formInline.shortName" style="width: 321px"></el-input>
            </el-form-item>
          </div>
          <div class="el-col-6">
            <el-form-item prop="city" label="城市">
              <el-select v-model="formInline.province" placeholder="请选择" style="width: 155px; margin-right: 11px" @change="choseCity">
                <el-option v-for="item in data.provinces" :key="item" :label="item" :value="item"></el-option>
              </el-select>
              <el-select v-model="formInline.city" placeholder="请选择" style="width: 155px">
                <el-option v-for="item in data.cities" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="el-col-6">
            <el-button @click="resetField">删除</el-button>
            <el-button type="primary" class="search" @click="search">搜索</el-button>
          </div>
        </el-form>
        <!-- 选项卡 -->
        <el-col>
          <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
            <el-tab-pane label="全部" name="first"></el-tab-pane>
            <el-tab-pane label="待审核" name="second"></el-tab-pane>
            <el-tab-pane label="已审核" name="third"></el-tab-pane>
            <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
          </el-tabs>
        </el-col>
        <!-- 共n条记录 -->
        <elalert :counts="counts"></elalert>

        <!-- 结果区 -->
        <el-table :data="list" style="width: 100%">
          <el-table-column align="left" prop="number" label="试题编号" width="120" />
          <el-table-column align="left" prop="subject" label="学科" width="120" />
          <el-table-column align="left" prop="catalog" label="目录" width="120" />
          <el-table-column align="left" prop="questionType" label="题型" width="120" />
          <el-table-column align="left" label="题干" width="280">
            <template #default="scoped">
              <span v-html="scoped.row.question"></span>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="addDate" label="录入时间" width="180" />
          <el-table-column align="left" prop="difficulty" label="难度" width="80" />
          <el-table-column align="left" prop="creator" label="录入人" width="120" />
          <el-table-column align="left" prop="chkState" label="审核状态" width="120">
            <template v-slot="{ row }">
              <span>{{
                row.chkState === 1
                  ? '待审核'
                  : row.chkState === 2
                  ? '通过'
                  : '拒绝'
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="chkRemarks" label="审核意见" width="150" />
          <el-table-column align="left" prop="chkUser" label="审核人" width="120" />
          <el-table-column align="left" prop="publishState" label="发布状态" width="150">
            <template v-slot="{ row }">
              <span>{{
                row.publishState === 1
                  ? '待发布'
                  : row.publishState === 2
                  ? '已发布'
                  : '已下架'
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="220" fixed="right">
            <template v-slot="{ row }">
              <el-button type="text" @click="view(row)">
                <span>预览</span></el-button>
              <el-button type="text" :disabled="row.chkState === 2" @click="check(row)">
                <span>审核</span></el-button>
              <el-button type="text" @click="edit(row)" :disabled="row.publishState === 2">
                <span>修改</span></el-button>
              <el-button type="text" @click="choicePublish(row)">
                <span>{{ row.publishState !== 2 ? '上架' : '下架' }}</span>
              </el-button>
              <el-button type="text" @click="del(row)" :disabled="row.publishState === 2">
                <span>删除</span></el-button>
            </template>
          </el-table-column>
        </el-table>
        <elpagination :counts="counts" :data="data" :n="[5, 10, 20, 50]" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></elpagination>
      </div>
    </el-card>
    <!-- -------------------------------- -->
    <eldialog :showDialog="showDialog" :showVideo="showVideo" @close="showDialog = false" @clickVideo="showVideo = true" :row="row"></eldialog>
    <!-- ----------------------------------------------- -->
    <el-dialog :visible.sync="showCheck" width="440px" title="题目审核">
      <el-radio v-model="formInline.chkState" :label="2" @change="changeCheckRadio">通过</el-radio>
      <el-radio v-model="formInline.chkState" :label="3" @change="changeCheckRadio">拒绝</el-radio>
      <el-input type="textarea" style="margin: 30px 0 50px" v-model="formInline.chkRemarks"></el-input>
      <div align="right">
        <el-button @click="showCheck = false">取消</el-button>
        <el-button type="primary" @click="submitCheck">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import elpagination from '@/components/elpagination/index.vue'
import eldialog from '@/components/eldialog/index'
import elalert from '@/components/elalert/index.vue'
// 获取学科数据
import { simple } from '@/api/hmmm/subjects'
//二级目录
import { simple as directorysSimple } from '@/api/hmmm/directorys'
//标签
import { simple as tagsSimple } from '@/api/hmmm/tags'
// 录入人
import { simple as userSimple } from '@/api/base/users'
import { chkType, publishType, questionType, difficulty, direction } from '@/api/hmmm/constants'

import { remove, detail, choice, choicePublish, choiceCheck } from '@/api/hmmm/questions'
// 省份
import { provinces, citys } from '@/api/hmmm/citys'
// 格式化时间
import moment from 'moment'
export default {
  components: { elalert, elpagination, eldialog },
  data() {
    return {
      activeName2: 'first',
      counts: 1, //表格条数
      list: [], //渲染
      // 省份数组
      formInline: {
        id: null,
        page: 1,
        pagesize: 5,
        city: '',
        province: '',
        keyword: '',
        remarks: '',
        chkState: null,
        chkRemarks: null,
        shortName: '',
        subjectID: null,
        catalogID: null,
        tags: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null
      },
      chkType: chkType,
      publishType: publishType,
      showDialog: false,
      showVideo: false,
      showCheck: false,
      row: {},
      shi1: [],
      currentPage: 1,
      data: {
        page: 1,
        pagesize: 5,
        city: null,
        shortName: null,
        state: null,
        subjectID: null,
        catalogID: null,
        tags: null,
        questionType: questionType, //试题类型
        difficulty: difficulty, //难度
        direction: direction, //方向
        creatorID: [],
        provinces: null, //省份
        cities: null //市
      }
    }
  },
  async created() {
    this.getObjects() //学科
    const { data } = await userSimple() // 录入人
    this.data.creatorID = data
    // 获取全国身份
    this.getCityData()
    this.getChoiceList()
  },
  methods: {
    //获取学科数据
    async getObjects() {
      const { data } = await simple()
      this.data.subjectID = data
    },

    async changeSubjectID(val) {
      const res = await directorysSimple({ subjectID: val })
      this.data.catalogID = res.data
      const res1 = await tagsSimple({ subjectID: val })
      this.data.tags = res1.data
    },

    // 获取全国拿城市
    getCityData() {
      this.data.provinces = provinces()
      // console.log(this.data.provinces);
    },
    // 获取该城市的区
    choseCity() {
      this.data.cities = citys(this.formInline.province)
      // console.log(this.data.cities);
    },
    // 清除表单
    resetField() {
      this.$refs.searchRef.resetFields()
      this.formInline.questionType = null
      this.formInline.difficulty = null
      this.formInline.direction = null
      this.formInline.province = null
    },
    //获取精选列表
    async getChoiceList() {
      const { data } = await choice(this.formInline)
      data.items.forEach(item => {
        item.addDate = moment(item.addDate).format('YYYY-MM-DD HH:mm:ss')
        item.difficulty = item.difficulty === '1' ? '简单' : item.difficulty === '2' ? '一般' : '困难'
        item.questionType = item.questionType === '1' ? '单选' : '多选'
      })
      this.counts = data.counts
      this.list = data.items
      this.page = data.page
      this.pagesize = data.pagesize
    },

    handleClick() {
      switch (this.activeName2) {
        case 'first':
          this.getChoiceList()
          break
        case 'second':
          this.formInline.chkState = 1
          this.getChoiceList()
          break
        case 'third':
          this.formInline.chkState = 2
          this.getChoiceList()
          break
        case 'fourth':
          this.formInline.chkState = 3
          this.getChoiceList()
          break
      }
    },
    // 页码
    handleSizeChange(val) {
      this.formInline.pagesize = val
      this.activeName2 = 'first'
      this.formInline.chkState = null
      this.getChoiceList()
    },
    handleCurrentChange(val) {
      this.formInline.page = val
      this.activeName2 = 'first'
      this.formInline.chkState = null
      this.getChoiceList()
    },
    // -----------------------
    async view(row) {
      this.showDialog = true
      const { data } = await detail({ id: row.id })
      this.row = { ...data, ...row }
      console.log(row)
      console.log(this.row)
      if (row.questionType === '单选') {
        this.row.options.forEach(item => {
          if (item.isRight === 1) {
            this.row.right = item.id
          }
        })
      } else if (row.questionType === '多选') {
        this.row.right = []
        this.row.options.forEach(item => {
          if (item.isRight === 1) {
            this.row.right.push(item.id)
          }
        })
      }
    },

    //---------------------------
    changeCheckRadio(val) {
      // console.log(val)
      this.formInline.chkState = val
    },
    //-----------------------
    // 审核
    async submitCheck() {
      this.formInline.chkState = +this.formInline.chkState
      if (!this.formInline.chkRemarks) return this.$message.warning('审核完成！')
      try {
        await choiceCheck(this.formInline)
        this.$message.success('审核完成！')
        this.showCheck = false
        this.getChoiceList()
      } catch (error) {
        console.log(error)
      }
    },
    //-----------------------------------
    check(row) {
      console.log(row)
      this.formInline.id = row.id
      this.showCheck = true
    },
    //-------------------------------------------
    async edit(row) {
      this.$store.dispatch('row/changeRow', row)
      this.$router.push(`new?id=${row.id}`)
    },
    //------------------------------------------------
    // 删除
    async del(row) {
      this.$confirm('该项操作不可恢复！确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove(row)
          this.$message.success('删除成功')
          this.getChoiceList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除'
          })
        })
    },
    //-------------------------------------------------------
    async choicePublish(row) {
      this.$confirm(`确定要${row.publishState === 1 || row.publishState === 0 ? '上架' : '下架'}吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (row.publishState === 1) {
            row.publishState = 2
          } else if (row.publishState === 2) {
            row.publishState = 0
          } else {
            row.publishState = 1
          }

          await choicePublish(row)

          this.getChoiceList()
          this.$message.success(`${row.publishState === 1 ? '上架' : '下架'}成功！`)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消成功'
          })
        })
    },
    //--------------------------------------------------
    resetField() {
      this.$refs.searchRef.resetFields()
      this.formInline.questionType = null
      this.formInline.difficulty = null
      this.formInline.direction = null
      this.formInline.province = null
    },
    // 搜索
    async search() {
      await this.getChoiceList()
      this.resetField()
    }
  }
}
</script>

<style scoped lang='scss'>
// 头部
.container {
  margin: 10px;
}
.btn_wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
// 表单
.el-col-6 {
  display: flex;
  justify-content: flex-end;
  width: 25%;
  height: 32px;
  margin-bottom: 18px;
}
.el-form-item {
  margin-right: 0;
}
</style>
